<template>
  <div class="cover-wrap" v-if="isShow">
    <div class="modal-wrap">
      <div class="top">
        <div>{{ title }}</div>
        <div @click="handleCancel">X</div>
      </div>
      <div class="content">
        <slot></slot>
      </div>
      <div class="footer">
        <button @click="handleCancel">取消</button>
        <button @click="handleEnter">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @desc: 定义通用弹窗组件Modal
 * @props
 *   - isShow: boolean 控制弹窗是否弹出
 *   - title: string 展示的标题
 *   - handleCancel: function 点击取消和X的回调
 *   - handleEnter: function 点击确认的回调
 *   -  具名插槽 content：  展示的内容
 * **/
export default {
  name: 'modal',
  beforeDestroy:function(){
    console.log('modal-beforeDestroy')
  },
  beforeCreate:function(){
    console.log('modal-beforeCreate')
  },
  updated: function(){
    console.log('mpdal-updated')
  },
  props: {
    isShow: {
      type: Boolean,
      default: false,
      required: false,
    },
    title: {
      type: String,
      default: "123",
      required: false,
    },
    content: {
      type: String,
      default: "",
      required: false,
    },
    handleCancel: {
      default: () => {},
    },
    handleEnter: {
      default: () => {},
    },
  },
};
</script>
 <style scoped>
    .cover-wrap{
      background: rgba(0, 0, 0, 0.5);
      position: fixed;
      left: 0;
      top: 0;
      height: 100vh;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .modal-wrap{
      background: chartreuse;
      padding: 10px;
      min-width: 40vw;
    }
    .top{
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
    }
    .content{
      min-height: 100px;
      border-bottom: 1px solid #ddd;
    }
    .footer{
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

  </style>